<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1862939_eudxha76m4k.css">
</head>
<body>
    <!-- 导航栏开始 -->
    <div class="nav">
        <div class="allnav">
            <div class="nav-left">
                <a href="#">小米网</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">米聊</a>
                <span>|</span>
                <a href="#">游戏</a>
                <span>|</span>
                <a href="#">多看阅读</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">小米网移动版</a>
                <span>|</span>
                <a href="#">Select region</a>
                <span>|</span>
                <a href="#">米粉节答疑</a>
            </div>
            <div class="nav-right">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
            </div>
        </div>
    </div>
    <!-- 导航栏结束
        标题&搜索框-->
    <div class="search">
        <a href="#"><img src="images/logo.png" alt=""></a>
        <a href="#" class="search-right">
            <span class="iconfont icon-noun__cc"></span>
            <span>4月14日开放购买</span>
        </a>
        <div class="search-input">
            <input type="text" placeholder="搜索您需要的商品"><button class="search-button"><span class="iconfont icon-icon-test"></span></button>
            <span class="input-one">小米手环</span>
            <span class="input-two">耳机音箱</span>
            <span class="input-three">保护壳</span>
            <button class="shopcar">
                <span class="iconfont icon-tianchongxing-"></span>
                <span>购物车</span>
            </button>
        </div>
    </div>
    <!-- 标题&搜索框结束
        正文开始 -->
    <div>
        <!-- 商品分类 -->
        <div class="allshop">
            <ul>
                <li>全部商品分类</li>
                <li>首页</li>
                <li>小米手机</li>
                <li>红米</li>
                <li>小米平板</li>
                <li>小米点视</li>
                <li>盒子</li>
                <li>路由器</li>
                <li>合约机</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
        </div>
        
    </div>
    <div class="shop-nav">
        <div class="shop-text">
            <ul>
                <li>
                    <span>购买手机</span><br>
                    <span>小米Note</span>
                    <span>小米4</span>
                    <span>红米</span>
                    <span>红米Note</span>
                </li>
                <li>
                    <span>购买电视与平板</span><br>
                    <span>小米点视</span>
                    <span>小米盒子</span>
                    <span>小米平板</span>
                </li>
                <li>
                    <span>路由器与智能硬件</span><br>
                    <span>路由器</span>
                    <span>体重秤</span>
                    <span>净化器与滤芯</span>
                </li>
                <li>
                    <span>插线板、移动电源与电池</span><br>
                    <span>小米移动电源</span>
                    <span>电池</span>
                    <span>充电器</span>
                </li>
                <li>
                    <span>耳机音箱与存储卡</span><br>
                    <span>小米头戴式耳机</span>
                    <span>小米活塞耳机</span>
                </li>
                <li>
                    <span>保护套与贴膜</span><br>
                    <span>保护套/保护壳</span>
                    <span>贴膜</span>
                    <span>防尘塞</span>
                </li>
                <li>
                    <span>后盖与个性化配件</span><br>
                    <span>米键</span>
                    <span>后盖</span>
                    <span>贴纸</span>
                    <span>手机支架</span>
                </li>
                <li>
                    <span>小米生活方式</span><br>
                    <span>服装</span>
                    <span>米兔</span>
                    <span>背包</span>
                    <span>生活周边</span>
                </li>
            </ul>
        </div>
        <div class="content">
            <div id="list">
                <img src="images/banner1.png" alt="">
                <img src="images/banner2.png" alt="">
                <img src="images/banner3.png" alt="">
                <img src="images/banner4.png" alt="">
                <img src="images/banner5.png" alt="">
            </div>
            <button id="prev"></button>
            <button id="next"></button>
            <div id="btns">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
        </div>
        <script>
            $(function(){
                let index = 0;
                $("#next").click(function(){
                    index++;
                    if(index>4){
                        index = 0;
                    }
                    console.log(index);
                    show(index);
                })
                $("#prev").click(function(){
                    index--;
                    if(index<0){
                        index = $("#list img").length-1;
                    }
                    console.log(index);
                    show(index);
                })
                $("#btns span").click(function(){
                    let i = $(this).index();
                    console.log(i);
                    index=i;
                    show(i);
                })
                function show(index){
                    $("#list img").eq(index).fadeIn().siblings().fadeOut();
                    $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
                }
            })
        </script>
        <div class="shop-photo">
            <div><img src="images/01.png" alt=""></div>
            <div><img src="images/02.png" alt=""></div>
            <div><img src="images/03.png" alt=""></div>
        </div>
    </div>
    <!-- 商品分类结束 -->
    <div class="body-nav1">
        <span>小米明星单品</span>
        <span class="body-nav1-text2">根据机型选配件</span>
        <span class="prev"></span>
        <span class="next"></span>
    </div>
    <div class="body-sale1">
        <div class="body-sale1-img">
            <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt=""><br>
            <span class="body-sale1-text1">小米智能插座</span><br>
            <span class="body-sale1-text2">让普通家电变得更智能</span>
        </div>
        <div class="body-sale1-img">
            <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt=""><br>
            <span class="body-sale1-text1">小米空气净化器</span><br>
            <span class="body-sale1-text2">高性能智能空气净化器立即预约</span>
        </div>
        <div class="body-sale1-img">
            <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt=""><br>
            <span class="body-sale1-text1">小米活塞耳机简装版</span><br>
            <span class="body-sale1-text2">好声音源自活塞式音腔，延续经典设计</span>
        </div>
        <div class="body-sale1-img">
            <img src="images/aa.jpg" alt=""><br>
            <span class="body-sale1-text1">小米路由器</span><br>
            <span class="body-sale1-text2">顶级双屏幕AC智能路由器，内置1TB大硬盘</span>
        </div>
    </div>
    <div class="body-nav2">
        <span>新品上架</span>
        <span class="body-nav2-text2">更多></span>
    </div>
    <div class="body-sale2">
        <div class="body-sale2-right">
            <div class="body-sale2-img1">
                <img src="images/fanghezi0407xiao.jpg" alt="">
            </div>
            <div class="body-sale2-img2">
                <span>小米手环</span><br>
                <span>79元</span><br>
                <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
            </div>
            <div class="body-sale2-img2 null">
                <div class="body-sale2-img3">
                    <span>五周年米兔钥匙扣</span><br>
                    <span>9.9元</span>
                    <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt="">
                </div>
                <div class="body-sale2-img3">
                    <span>QCY派Q8蓝牙耳机</span><br>
                    <span>59.9元</span>
                    <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                </div>
            </div>
            <div class="body-sale2-img2">
                <span>小米T恤路标MILOGO</span><br>
                <span>39元</span>
                <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
            </div>
            <div class="body-sale2-img2">
                <span>小米实木后盖</span><br>
                <span>69元</span>
                <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
            </div>
            <div class="body-sale2-img2">
                <span>小米Note超薄保护壳</span><br>
                <span>49元</span>
                <img src="images/T1VkKvBvhT1RXrhCrK!220x220.jpg" alt="">
            </div>
            <div class="body-sale2-img2">
                <span>小米自拍杆</span><br>
                <span>49元</span>
                <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
            </div>
            <div class="body-sale2-img2">
                <span>先锋CL31系列耳式耳机</span><br>
                <span>99元</span>
                <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
            </div>
        </div>
        <div class="body-sale2-left">
            <div class="body-sale2-left1">
                <span>SanDisk32GB存储卡</span><br>
                <span>79元</span><br>
                <span>还有更多特价商品</span>
                <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
            </div>
            <div class="body-sale2-left1">
                <span>特惠配件套餐</span><br>
                <span>手机必备配件组合购买</span><br>
                <span>实惠更优惠</span>
                <img src="images/channel-list-cool.jpg" alt="">
            </div>
            <div class="body-sale2-left1">
                <span>我爱酷玩</span><br>
                <span>邂逅炫酷的电子产品</span><br>
                <span>结识趣味相投的朋友</span>
                <img src="images/channel-list-new.jpg" alt="">
            </div>
            
            <div class="body-sale2-left2">
                <ul>
                    <li>
                        <span>企业用户采购通道</span>
                        <span>></span>
                    </li>
                    <li>
                        <span>小米手机防伪查询</span>
                        <span>></span>
                    </li>
                    <li>
                        <span>小米手机官翻版</span>
                        <span>></span>
                    </li>
                    <li>
                        <span>小米路由器管翻版</span>
                        <span>></span>
                    </li>
                    <li>
                        <span>米粉红包</span>
                        <span>></span>
                    </li>
                </ul>
                <div class="charge">
                    <span>话费充值</span><br>
                    <input type="text" name="" id="" placeholder="请输入手机号">
                    <select>
                        <option value="100元">100元</option>
                        <option value="100元">200元</option>
                        <option value="100元">50元</option>
                    </select>
                    <p>实时价格98.4元起</p>
                    <button>立即充值</button>
            </div>
        </div>
        </div>
    </div>
    <!-- 商品页面结束 -->
    <div class="footer">
        <div class="f_content">
	        <div class="c_service">
		        <ul>
			        <li>
			            <a href="#">
				            <img src="images/10.png" alt="">
					        <span>1小时快修服务</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/11.png" alt="">
					        <span>7天无理由退货</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/12.png" alt="">
					        <span>15天免费换货</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/13.png" alt="">
					        <span>满150元包邮</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/14.png" alt="">
					        <span>520余家售后网点</span>
				        </a>
			        </li>
			    </ul>
		    </div>
		    <div class="c_links">
		        <dl>
			        <dt>帮助中心</dt>
			        <dd><a href="#">购物指南</a></dd>
			        <dd><a href="#">支付方式</a></dd>
			        <dd><a href="#">配送方式</a></dd>
			    </dl>
			    <dl>
			        <dt>服务支持</dt>
			        <dd><a href="#">售后政策</a></dd>
			        <dd><a href="#">自助服务</a></dd>
			        <dd><a href="#">相关下载</a></dd>
			    </dl>
			    <dl>
			        <dt>小米之家</dt>
			        <dd><a href="#">小米之家</a></dd>
			        <dd><a href="#">服务网点</a></dd>
			        <dd><a href="#">预约亲临到店服务</a></dd>
			    </dl>
			    <dl>
			        <dt>关于小米</dt>
			        <dd><a href="#">了解小米</a></dd>
			        <dd><a href="#">加入小米</a></dd>
			        <dd><a href="#">联系我们</a></dd>
			    </dl>
			    <dl>
			        <dt>关注我们</dt>
			        <dd><a href="#">新浪微博</a></dd>
			        <dd><a href="#">小米部落</a></dd>
			        <dd><a href="#">官方微信</a></dd>
			    </dl>
			    <dl class="kefu">
			        <p class="k_tel">400-100-5678</p>
			        <p class="k_time">周一至周日 8:00-21:00</p>
			        <p class="k_desc">（仅收市话费）</p>
			        <a href="#">24小时在线客服</a>
			    </dl>
		    </div>
		    <div style="width:100%;border-bottom:1px solid #dfdfdf;"></div>
		    <div class="c_bottom">
		        <p class="b_url">小米旗下网站：小米网  |  MIUI  |  米聊  |  多看书城  |  小米路由器  |  繁體香港  |  繁體台灣  |  English  |  小米后院  |  小米天猫店  |  小米淘宝直营店  |  小米网盟</p>
			    <p class="b_url">&copy;mi.com 京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
			    <p class="b_pic">
			        <a href="#"><img src="http://s1.mi.com/zt/12052601/cnnicVerifyseal.png" alt="" width="54" height="20"/></a>
			        <a href="#"><img src="http://s1.mi.com/zt/12052601/szfwVerifyseal.gif" alt="" width="57" height="20"/></a>
			        <a href="#"><img src="http://s1.mi.com/zt/12052601/save.jpg" alt="" width="46" height="20"/></a>
				</p>
				<select>
					<option>简体中文</option>
					<option>繁体中文</option>
					<option>English</option>
				</select>
		    </div>
	    </div>
    </div>
</body>
</html>